<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.1.8.2.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script src="js/common_js.js" type="text/javascript"></script>
<script src="js/jquery.foucs.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
<title>产品列表页</title>
</head>
<script>
	$(document).ready(function() {
	    // 页面加载时检查sessionStorage是否有phone值
	    var storedPhone = sessionStorage.getItem('phone');
	    if (storedPhone) {
	        // 如果有，将其插入到id为"login_info"的元素中
	        $('#login_info').text(storedPhone);
	    }
	});
	
	const length=sessionStorage.getItem("ListLength");
	console.log(length);
	const dataDef = sessionStorage.getItem('data');
	const data = JSON.parse(dataDef);
	console.log(data);

	$(document).ready(function() {
		    // 检查tb里是否有数据，没有就执行fun函数
		    var tb = document.getElementById(tb);
		    if (!tb) {
		        fun();
		    }
		});

function fun() {
    var str = '<ul class="list_style">';
    for (var i = 0; i < length; i++) {
        str += ' <li class="clearfix" id="li' + i + '">';
        str += ' <div class="product_lists clearfix">';
        str += '  <a href="#" class="Collect"></a>';
        str += ' <div data-product-id="' + data[i].productId + '">';
        str += ' <a href="#"><img src="'+data[i].imageUrl+'" alt="产品图片" width="220px" height="220pxs"/></a>'; 
        str += '<p class="title_p_name">' + data[i].productName + '</p>';
        str += '  <p class="title_Profile">' + data[i].description + '</p>';
        str += '  <p class="price"><b></b>￥' + data[i].price;
        str += ' <button onclick="searchProductDetail(' + data[i].productId + ')" class="buy-button">立即购买</button>' + '</p>';
        str += '   </div> </li>';
        str += ' </div> ';
    }
    str += '</ul>'; 
    $("#tb").html(str);
}

const searchProductDetail = (productId) => {
    axios.post("http://127.0.0.1:8080/product/getProductDetail", { productId }).then((response) => {
        console.log(response);
		sessionStorage.setItem('productDetail',JSON.stringify(response.data));
		window.location.href="Product-detailed.html";
    }).catch(error => {
        console.error("获取产品详情失败:", error);
    });
}



</script>
<body>
<!--顶部样式-->
<div class="top_header">
<em class="left_img"></em>
<div class="header clearfix" id="header">
<div class="header_Section">
 <div class="shortcut">
  <ul>
        <li  class="hd_menu_tit"><a href="user_info.html" id="login_info"></a></li>
   <li  class="hd_menu_tit"><em class="Collect_img"></em><a href="#">收藏夹</a></li>
   <li  class="hd_menu_tit"><em class="cart_img"></em><a href="shopping_cart.html">购物车</a></li>
   <li  class="hd_menu_tit list_name" data-addclass="hd_menu_hover"><a href="#">网站导航</a><em class="navigation_img"></em>

    <div class="hd_menu_list">
   </li>
  </ul>
 </div>
 <div class="nav" id="Navigation">
  <ul class="Navigation_name"> 
   <li class=""><a href="index.html">首页</a></li>
   <li class=""><a herf="#">浆果类专区</a></li>
   <li class=""><a herf="#">核果类专区</a></li>
   <li class=""><a herf="#">温性水果专区</a></li>
   <li class=""><a herf="#">仁果专区</a></li>
   <li class=""><a herf="#">联系我们</a></li>
  </ul>
 </div>
</div>
</div>
<em class="right_img"></em>
</div>
<!---->
<div></div>
<!--位置-->
<div class="Bread_crumbs">
 <div class="Inside_pages clearfix">
   <div class="left">当前位置：<a href="index.html">首页</a>&gt;<a href="#">列表</a></div>
   <div class="right Search">
   <form>
    <input name="" type="text"  class="Search_Box"/>
    <input name="" type="button"  name="" class="Search_btn"/>
    </form>
   </div>
 </div>
</div>
<!--产品列表-->
<div class="Inside_pages clearfix">
<div class="margintop">
 <DIV class="left_style">
   <div class="title_img_p">
	   </div>
   <div class="ranking">
    <div class="ranking_title"><span>销量</span>排行</div>

   </div>
 </DIV>
 <DIV class="right_style">
    <div id=tb >
		
	</div>
 </DIV>
 </div>
</div>

</body>

<style>
	.buy-button {
	    background-color: #4CAF50;
	    color: white;
	    border: none;
	    padding: 10px 20px;
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    font-size: 16px;
	    margin: 4px 2px;
	    cursor: pointer;
	    border-radius: 4px;
	}
</style>
</html>
